<script lang="ts">
	import type { PlanInfo } from '$lib/api/proto/roadmap_plan_api';
	import { USER_ROLE } from '$lib/api/proto/user_api';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import moment from 'moment';
	import EditPlanModal from './EditPlanModal.svelte';
	import PlanDetail from './PlanDetail.svelte';

	interface Props {
		roadmapId: string;
		memberUserId: string;
	}
	let props: Props = $props();

	let planList = $state([] as PlanInfo[]);
	let curPlan = $state(null as PlanInfo | null);

	let showAddModal = $state(false);

	async function loadPlanList() {
		if (userStore.userSession == null) {
			return;
		}
		const res = await callApi(
			appStore.roadmapPlanApiClient.listPlan({
				sessionId: userStore.userSession,
				roadmapId: props.roadmapId,
				targetMemberUserId: props.memberUserId
			}).response
		);
		planList = res.planList;
		if (res.planList.length == 0) {
			curPlan = null;
		}
		if (curPlan == null && res.planList.length > 0) {
			curPlan = res.planList[0];
		}
	}

	async function onUpdatePlan() {
		if (userStore.userSession == null || curPlan == null) {
			return;
		}
		const res = await callApi(
			appStore.roadmapPlanApiClient.getPlan({
				sessionId: userStore.userSession,
				roadmapId: props.roadmapId,
				targetMemberUserId: props.memberUserId,
				planId: curPlan.planId
			}).response
		);
		const tmpList = planList.slice();
		const index = tmpList.findIndex((item) => item.planId == curPlan?.planId);
		if (index != -1 && res.plan != undefined) {
			tmpList[index] = res.plan;
			planList = tmpList;
			curPlan = res.plan;
		}
	}

	async function removePlan() {
		if (userStore.userSession == null || curPlan == null) {
			return;
		}
		await callApi(
			appStore.roadmapPlanApiClient.removePlan({
				sessionId: userStore.userSession,
				roadmapId: props.roadmapId,
				targetMemberUserId: props.memberUserId,
				planId: curPlan.planId
			}).response
		);
		const tmpList = planList.filter((item) => item.planId != curPlan?.planId);
		if (tmpList.length > 0) {
			curPlan = tmpList[0];
		} else {
			curPlan = null;
		}
		planList = tmpList;
	}

	$effect(() => {
		loadPlanList();
	});
</script>

<div class="w-full">
	<div class="flex justify-between">
		<h3 class="text-2xl">成长计划</h3>
		<div class="flex gap-2">
			{#if planList.length > 0}
				<select
					class="select w-[300px]"
					value={curPlan?.planId ?? ''}
					onchange={(e) => {
						curPlan = planList.find((item) => item.planId == e.currentTarget.value) ?? null;
					}}
				>
					{#each planList as plan}
						<option value={plan.planId}
							>{plan.basicInfo?.planName} ({moment(Number(plan.startTime)).format(
								'YYYY-MM-DD'
							)}-{moment(Number(plan.endTime)).format('YYYY-MM-DD')})</option
						>
					{/each}
				</select>
			{/if}
			{#if userStore.userInfo?.basicInfo?.userRole == USER_ROLE.USER_ROLE_COACH}
				<button class="btn btn-accent" onclick={() => (showAddModal = true)}> 增加 </button>
			{/if}
		</div>
	</div>

	<div class="divider m-0"></div>
	{#if curPlan != null}
		<PlanDetail
			roadmapId={props.roadmapId}
			plan={curPlan}
			onChange={() => onUpdatePlan()}
			onRemove={() => {
				removePlan();
			}}
		/>
	{/if}
</div>

<div class="absolute -left-[10000px]">
	{#if showAddModal}
		<EditPlanModal
			roadmapId={props.roadmapId}
			memberUserId={props.memberUserId}
			onCancel={() => (showAddModal = false)}
			onOk={() => {
				showAddModal = false;
				curPlan = null;
				loadPlanList();
			}}
		/>
	{/if}
</div>
